<template>
	<view>
		<view v-show="step==1">
			<view>
				选择小区
			</view>
			<u-cell-group>
				<u-cell :title="item.village" 
				
				v-for="item in residential" @click="choosevillage(item.id)">
				
				<template #right-icon>
					 <view v-if="item.id===residential_id">
						<u-icon name="checkbox-mark" color="#2979ff" size="28"></u-icon>
					 </view>  
				</template>
				</u-cell>

			</u-cell-group>

		</view>
		<view v-show="step==2">
			<view>
				选择楼栋
			</view>
			
			<u-button @click="step--">上一步</u-button>
			<u-cell-group>
				<u-cell :title="item.buildingName" 
				
				v-for="item in building" @click="choosebuilding(item.id)">
				
				<template #right-icon>
					 <view v-if="item.id===building_id">
						<u-icon name="checkbox-mark" color="#2979ff" size="28"></u-icon>
					 </view>  
				</template>
				</u-cell>

			</u-cell-group>

		</view>

<!--  单元 -->

		<view v-show="step==3">
			<view>
				选择单元
			</view>
			
			<u-button @click="step--">上一步</u-button>
			<u-cell-group>
				<u-cell :title="item.unitName" 
				
				v-for="item in unit" @click="chooseunit(item.id)">
				
				<template #right-icon>
					 <view v-if="item.id===unit_id">
						<u-icon name="checkbox-mark" color="#2979ff" size="28"></u-icon>
					 </view>  
				</template>
				</u-cell>

			</u-cell-group>

		</view>
		
		<view v-show="step==4">
			<view>
				选择门牌
			</view>
			
			<u-button @click="step--">上一步</u-button>
			<u-cell-group>
				<u-cell :title="item.doorplateName" 
				
				v-for="item in doorplate" @click="choosedoorplate(item.id)">
				
				<template #right-icon>
					 <view v-if="item.id===doorplate_id">
						<u-icon name="checkbox-mark" color="#2979ff" size="28"></u-icon>
					 </view>  
				</template>
				</u-cell>

			</u-cell-group>

		</view>




	</view>
</template>

<script>
	import {
		get_residential as get_residentialApi
	} from '@/api/village.js'
	export default {
		data() {
			return {
				residential: [],
				step: 1,
				residential_id:'',
				building:[],
				building_id:'',
				//  单元
				unit:[],
				unit_id:'',
				//  门牌
				doorplate:[],
				doorplate_id:''
			}
		},
		onLoad() {
			this.get_residential(); //  获取小区
		},
		methods: {
			get_residential() {
				get_residentialApi().then(res => {
					console.log(res)
					this.residential = res
				})
			},
	
			choosevillage(id) {
				console.log(id)
				this.residential_id = id;
				
				this.get_building()
				
				setTimeout(v=>{
					this.step++;
				},300)
			},
					//  获取楼栋  
			get_building() {
				
				
				
				uni.$u.http.get('/building/get_building/'+this.residential_id)
				.then(res=>{
					console.log(res)
					this.building = res
				})
				
				
			},
			//  选择楼栋
			
			choosebuilding(id) {
				console.log(id)
				this.building_id = id;
				// unit/get_unit/3
				this.get_unit()
				
				setTimeout(v=>{
					this.step++;
				},300)
			},
			get_unit(){
				 
				uni.$u.http.get('/unit/get_unit/'+this.building_id)
				.then(res=>{
					console.log(res)
					this.unit = res
				}) 
				
			},
			chooseunit(id){
				console.log(id)
				this.unit_id = id;
			// doorplate/get_doorplate/30
				this.get_doorplate()
				
				setTimeout(v=>{
					this.step++;
				},300)
			}
			,
			// get_doorplate
			get_doorplate(){
				uni.$u.http.get('/doorplate/get_doorplate/'+this.unit_id)
				.then(res=>{
					console.log(res)
					this.doorplate = res
				}) 
				
			},
			choosedoorplate(id){
				
				uni.$u.http.get('/user/bind_doorplate/'+id)
				.then(res=>{
					
					uni.showToast({
						title:"绑定成功"
					});
					
					this.$store.dispatch('getUserInfo')
					
					//  还没有设置底部栏 
					uni.switchTab({
						url:'/pages/index/index'
					})
					
					
				
				}) 
				  
				
				
			}
			
			
			
		}
	}
</script>

<style>

</style>
